<template>
    <div id="dialog-container">
        <el-dialog v-dialogDrag
            title="选择权限" append-to-body
            :visible.sync="dialogVisible" @close="$emit('update:show', false)" :before-close="handleClose" :show="show"
            :close-on-click-modal="false" width="460px">
            <el-tree
                :data="treelist"
                show-checkbox
                node-key="id"
                :default-expanded-keys="expandArr"
                :default-checked-keys="checkedArr"
                :props="defaultProps">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // import { setPermissionService } from 'service/system-manage/role-permission-manage'
    export default {
        data() {
            return {
                dialogVisible: this.show,
                treelist: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                expandArr: ["1",2],    // 默认展开的节点
                checkedArr: ["5",10,6]    // 默认选中的节点
            }
        },
        props: {
            show: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            show() {
                this.dialogVisible = this.show;
                this.showList();    // 每次打开时发送一次请求
            }
        },
        mounted() {
            this.showList();
        },
        methods: {
            // 初始化列表
            showList() {
                // setPermissionService()
                //     .then((res) => {
                //         // console.log(res)
                //         this.treelist = res.data.pd.tree;
                //     });
            },
            handleClose() {
                this.dialogVisible = false;
            }
        }
    }
</script>
